<template>
  <section>
    <van-sticky>
      <PageHeader title="个人资料"/>
    </van-sticky>

    <div class="flex flex-col pb20 bg-color-white" v-if="member">
      <div class="flex flex-row flex-center relative photo-wrapper">
        <img :src="member.auditing_photo_url ? member.auditing_photo_url : STATIC_BASE_URL + 'images/mp/gender.png'"
             class="member-photo" v-if="member.photo_audit_status == MEMBER_PHOTO_AUDIT_STATUS_AUDITING" />
        <img :src="member.photo_url ? member.photo_url : STATIC_BASE_URL + 'images/mp/gender.png'"
             class="member-photo" v-else />
        <div class="inline-block upload-icon-wrapper">
          <van-uploader :before-read="beforeUploadRead" :after-read="afterUploadRead">
            <i class="iconfont icon-shangchuantupian" style="font-size: 60px;"/>
          </van-uploader>
        </div>
      </div>
      <div class="flex flex-row flex-center font-common mt10" v-if="member.photo_audit_status == MEMBER_PHOTO_AUDIT_STATUS_AUDITING">(审核中)</div>

      <div class="flex flex-row flex-center mt10">
        <i class="iconfont icon-nan" style="color: #ff89b5;" v-if="member.gender==1"></i>
        <i class="iconfont icon-nv" style="color: #ff89b5;" v-else-if="member.gender==2"></i>
        <span class="font-large strong">{{ user.nick }}</span>
      </div>
      <div class="flex flex-row flex-center mt10 font-common color-gray-dark">资料完善度：{{ member.perfection_degree }}%
      </div>
    </div>

    <div class="flex flex-col pd10 bg-color-white mt10" v-if="member">
      <div class="flex flex-row flex-centerV pb10 border-bottom-gray font-common"
           @click="$router.push({name: 'MyProfileBase'})">
        <div class="flex flex-row pr10">
          <i class="iconfont icon-qiapian" style="font-size: 20px; color: #fcb63a;"/>
        </div>

        <div class="flex flex-row flex-left flex-1">
          基本资料
        </div>

        <div class="flex flex-row">
          <i class="iconfont icon-right-arrow"/>
        </div>
      </div>

      <div class="flex flex-row flex-centerV pt10 pb10 border-bottom-gray font-common"
           @click="$router.push({name: 'MyProfileExpect'})">
        <div class="flex flex-row pr10">
          <i class="iconfont icon-chaxuntiaojian" style="font-size: 20px; color: #ff4400;"/>
        </div>

        <div class="flex flex-row flex-left flex-1">
          择偶要求
        </div>

        <div class="flex flex-row">
          <i class="iconfont icon-right-arrow"/>
        </div>
      </div>

      <div class="flex flex-row flex-centerV pt10 pb10 border-bottom-gray font-common"
           @click="$router.push({name: 'MyProfileIntro'})">
        <div class="flex flex-row pr10">
          <i class="iconfont icon-jieshao" style="font-size: 20px; color: #13ca87;"/>
        </div>

        <div class="flex flex-row flex-left flex-1">
          个人介绍
        </div>

        <div class="flex flex-row">
          <i class="iconfont icon-right-arrow"/>
        </div>
      </div>

      <div class="flex flex-row flex-centerV pt10 font-common"
           @click="$router.push({name: 'MemberProfile', query: {id: member.id}})">
        <div class="flex flex-row pr10">
          <i class="iconfont icon-yulan" style="font-size: 16px; color: #ff7453;"/>
        </div>

        <div class="flex flex-row flex-left flex-1">
          预览主页
        </div>

        <div class="flex flex-row">
          <i class="iconfont icon-right-arrow"/>
        </div>
      </div>
    </div>

    <div class="empty-box"></div>
  </section>
</template>

<script>
import {
  fileUploadByBase64Uri,
  STATIC_BASE_URL,
  memberSaveBaseInfoUri, memberSaveMemberPhotoUri, memberMyProfileUri
} from "../../../common/api";
import PageHeader from "../../componets/PageHeader";
import Vue from 'vue';
import {Sticky, Popup, RadioGroup, Radio, Checkbox, Button, Toast, Uploader} from 'vant';
import {MEMBER_PHOTO_AUDIT_STATUS_AUDITING} from "../../../common/constants";

Vue.use(Sticky).use(Popup).use(RadioGroup).use(Radio).use(Checkbox).use(Button).use(Uploader);

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      STATIC_BASE_URL: STATIC_BASE_URL,
      MEMBER_PHOTO_AUDIT_STATUS_AUDITING: MEMBER_PHOTO_AUDIT_STATUS_AUDITING,
      member: null,
      user: null
    }
  },
  methods: {
    beforeUploadRead(file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        Toast('请上传 jpg/png 格式图片');
        return false;
      }
      return true;
    },
    afterUploadRead(file) {
      const that = this;
      that.$http.post(fileUploadByBase64Uri, {
        fileData: file.content,
        upload_token: that.GLOBAL.userInfo.upload_token
      }, {emulateJSON: true}).then(response => {
        let {msg, code, file_id, url} = response.body;
        if (code != 0) {
          Toast.fail(msg)
        } else {
          that.saveMemberProfile(url, file_id);
        }
      }, response => {
        Toast.fail('发生错误')
      })
    },
    saveMemberProfile(imgUrl, fileId) {
      const that = this;
      const postData = {
        photo: fileId
      };
      that.$http.post(memberSaveMemberPhotoUri, postData, {emulateJSON: true}).then(response => {
        let {msg, code, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.getMyMemberProfile();
          that.toast('上传成功，请等待审核');
        }
      }, response => {
        that.toast('发生错误');
      })
    },
    getMyMemberProfile() {
      const that = this;
      that.$http.post(memberMyProfileUri, null, {emulateJSON: true}).then(response => {
        let {msg, code, data} = response.body
        if (code != 0) {
          that.toast.fail(msg);
        } else {
          that.member = data.member;
          that.user = data.user;
        }
      }, response => {
        that.toast.fail('发生错误');
      })
    }
  },
  mounted: function () {
    if (this.GLOBAL.userInfo) {
      this.getMyMemberProfile();
    }

    this.EventBus.$on('OnUserLogined', () => {
      this.getMyMemberProfile();
    });
  }
}
</script>

<style scoped>
.photo-wrapper {
  height: 400px;
  overflow: hidden;
}

.photo-wrapper .member-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-wrapper .upload-icon-wrapper {
  z-index: 1;
  left: 45%;
  position: absolute;
  font-size: 36px;
  color: #ffffff;
}

.empty-box {
  height: calc(20px + env(safe-area-inset-bottom));
}
</style>
